<template>
  <div>
    <!-- 面包屑 -->
    <div class="home-breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item >车间模拟</el-breadcrumb-item>
        <el-breadcrumb-item >产线列表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="productline-content">

      <!-- left -->
      <div class="children-one">
        <!-- header -->
       <div class="productline-content-left-header">
          <span>&emsp;产线列表:</span>
          <el-link type="primary" :underline="false"  @click="openProductlineAddVisable">
            <i class="iconfont icon-jiahao"></i>
            新增&emsp;
          </el-link>
        </div>

        <!-- table -->
        <div class="productline-content-left-table">

          <vxe-table
            border
            resizable
            highlight-hover-row
            highlight-current-row
            max-height="800px"
            :data="prolineList">
            <vxe-table-column field="prolineId" title="id" show-overflow></vxe-table-column>
            <vxe-table-column field="prolineName" title="名称" show-overflow></vxe-table-column>
            <vxe-table-column field="description" title="描述" show-overflow></vxe-table-column>
            <vxe-table-column field="spectralEquipment" title="光谱设备" show-overflow></vxe-table-column>
            <vxe-table-column title="操作" width="110" show-overflow >
              <template v-slot="{ row }">
                <el-button type="text" size="small" @click="lookProlineList(row)">查看</el-button>
                <el-button type="text" size="small" @click="prolineEditVisble(row)">编辑</el-button>
                <el-button type="text" size="small" @click="prolineListDelete(row)">删除</el-button>
              </template>
            </vxe-table-column>
          </vxe-table>


        </div>
      </div>


      <!-- right -->
      <div
      class="children-two"
      v-loading="equipWorkloading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      >
        <!-- header -->
       <div class="right-div">
          <span style="flex: 1;color: #409EFF;">&emsp;产线设备：{{this.prolineEquipWorkName}}</span>
          <div class="right-div-buttom" v-if="this.jugeClick != 0">
            <el-link type="primary" :underline="false" @click="addEquipListVisble">
              <i class="iconfont icon-jiahao"></i>
              新增&emsp;
            </el-link>
          </div>
        </div>

        <!-- table -->


       <div style="border: 1px solid #DCDFE6;min-height: 300px;">
         <!-- 产线设备列表 -->
          <el-table
            v-loading="equipLoading"
            :data="ProlineEquipList"
            max-height="470"
            >
            <el-table-column
              prop="equipmentId"
              label="ID">
            </el-table-column>
            <el-table-column
              prop="equipmentName1"
              label="设备类型">
            </el-table-column>
            <el-table-column
              prop="prolineEquipName"
              label="设备名称">
            </el-table-column>
            <el-table-column
              prop="process"
              label="工序">
            </el-table-column>
            <el-table-column
              prop="output"
              label="输入">
            </el-table-column>
            <el-table-column
              prop="output"
              label="产出">
            </el-table-column>
            <el-table-column
              prop="yield"
              label="产量">
            </el-table-column>
            <el-table-column
              prop="utilization"
              label="利用率%">
            </el-table-column>
            <el-table-column
              width="100px"
              label="设备状态">
              <template slot-scope="scope">
                <el-select v-model="scope.row.deviceStatus" placeholder="请选择" size="mini" @change="theDeviceStatusChange(scope.row)">
                  <el-option
                    v-for="item in equipStatusOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column
              label="操作">
              <template slot-scope="scope">
                <el-button type="text" size="small">编辑</el-button>
                <el-button type="text" size="small" @click="prolineEquipDelete(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>


        <!-- header -->
        <div class="right-div">
           <span style="flex: 1;color: #409EFF;">&emsp;产线作业：{{this.prolineEquipWorkName}}</span>
           <div class="right-div-buttom" v-if="this.jugeClick != 0">
             <el-link type="primary" :underline="false" @click="workAddVisible = true">
               <i class="iconfont icon-jiahao"></i>
               新增&emsp;
             </el-link>

               <el-input
                 size="mini"
                 :style="{width:200+'px',marginRight:10+'px'}"
                 placeholder="请输入内容"
                 suffix-icon="el-icon-search"
                 v-model="input4">
               </el-input>
           </div>
         </div>

         <!-- table -->
        <div style="border: 1px solid #DCDFE6;min-height: 300px;">
           <el-table
            v-loading="workLoading"
           max-height="470"
             :data="ProlineductList"
             >
             <el-table-column
               prop="taskId"
               label="ID">
             </el-table-column>
             <el-table-column
               prop="taskName"
               label="作业计划名称">
             </el-table-column>
             <el-table-column
               prop="planningTime"
               label="计划时间">
             </el-table-column>
             <el-table-column
               prop="completionRate"
               label="完成率">
             </el-table-column>
             <el-table-column
               prop="enter"
               label="输入">
             </el-table-column>
             <el-table-column
               prop="output"
               label="产出">
             </el-table-column>
             <el-table-column
               prop="yield"
               label="产量">
             </el-table-column>
             <el-table-column
               prop="utilization"
               label="利用率%">
             </el-table-column>
             <el-table-column
               label="完成状态">
               <template slot-scope="scope">
                 <el-select v-model="scope.row.finishedCondition" placeholder="请选择" size="mini" @change="workStatusChange(scope.row)">
                   <el-option
                     v-for="item in workStatusptions"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value">
                   </el-option>
                 </el-select>
               </template>
             </el-table-column>
             <el-table-column
               label="操作">
               <template slot-scope="scope">
                 <el-button type="text" size="small">编辑</el-button>
                 <el-button type="text" size="small" @click="workDelete(scope.row)">删除</el-button>
               </template>
             </el-table-column>
           </el-table>
         </div>
      </div>
    </div>

    <!-- 产线列表添加 -->
    <el-dialog
      title="添加产线"
      :visible.sync="prodctlineListVisible"
      :close-on-click-modal="false"
      width="35%">
      <el-form :model="pLLForm">

        <el-form-item label="id:" :label-width="formLabelWidth">
          <el-input v-model="pLLForm.prolineId" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="名称:" :label-width="formLabelWidth">
          <el-input v-model="pLLForm.prolineName" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="光谱设备:" :label-width="formLabelWidth">
          <el-input v-model="pLLForm.spectralEquipment" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="描述" :label-width="formLabelWidth">
          <el-input
            v-model="pLLForm.description"
            autocomplete="off"
            type="textarea"
            maxlength="30"
            show-word-limit
              ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="prodctlineListVisible = false">取 消</el-button>
        <el-button type="primary" @click="addProlineList">确 定</el-button>
      </div>
    </el-dialog>


    <!-- 编辑产线 -->
    <vxe-modal v-model="prolineListEdit" title="编辑产线" width="800" resize destroy-on-close>
      <vxe-form :data="prolineEditForm" title-align="right" title-width="100">
        <vxe-form-item title="ID:" field="prolineId" span="12" :item-render="{name: 'input', attrs: {placeholder: '请输入Id'}}"></vxe-form-item>
        <vxe-form-item title="名称:" field="prolineName" span="12" :item-render="{name: 'input',attrs: {placeholder: '请选择名称'}}"></vxe-form-item>
        <vxe-form-item title="描述:" field="description" span="12" :item-render="{name: 'input', attrs: {placeholder: '请输入描述'}}"></vxe-form-item>
        <vxe-form-item title="光谱设备:" field="spectralEquipment" span="12" :item-render="{name: 'input', attrs: { placeholder: '是否为光谱设备'}}"></vxe-form-item>
        <vxe-form-item align="right" span="24">
          <vxe-button type="submit" status="primary" @click="prolineUpdate">保存</vxe-button>
          <vxe-button @click="prolineListEdit = false">取消</vxe-button>
        </vxe-form-item>
      </vxe-form>
    </vxe-modal>

    <!-- 新增产线设备 -->
    <vxe-modal v-model="equipAddVisible" title="新增产线设备" width="800" resize destroy-on-close>
      <vxe-form :data="equipAddForm" title-align="right" title-width="100">
        <vxe-form-item title="ID:" field="promentId" span="12" :item-render="{name: 'input', attrs: {placeholder: '请输入Id'}}"></vxe-form-item>
        <vxe-form-item title="设备类型:" field="equipmentId" span="12" :item-render =" { name: '$select', options: this.equipTypeOptions }" ></vxe-form-item>
        <vxe-form-item title="设备名称:" field="prolineEquipName" span="12" :item-render="{name: 'input', attrs: {placeholder: '请输入设备名称'}}"></vxe-form-item>
        <vxe-form-item title="工序:" field="process" span="12" :item-render="{name: 'input', attrs: { placeholder: '请输入工序'}}"></vxe-form-item>
        <vxe-form-item title="输入:" field="enter" span="12" :item-render="{name: 'input', }"></vxe-form-item>
        <vxe-form-item title="产出:" field="output" span="12" :item-render="{name: 'input'}"></vxe-form-item>
        <vxe-form-item title="产量:" field="yield" span="12" :item-render="{name: 'input'}"></vxe-form-item>
        <vxe-form-item title="利用率:" field="utilization" span="12" :item-render="{name: 'input',attrs: {type: 'number', placeholder: '请输入产率'}}"></vxe-form-item>
        <vxe-form-item title="设备状态:" field="deviceStatus" span="12" :item-render =" { name: '$select', options: this.equipStatusOptions }" ></vxe-form-item>
        <vxe-form-item align="right" span="24">
          <vxe-button type="submit" status="primary" @click="saveProlineEquip">保存</vxe-button>
          <vxe-button @click="equipAddVisible = false">取消</vxe-button>
        </vxe-form-item>
      </vxe-form>
    </vxe-modal>


    <!-- 新增产线作业 -->
    <vxe-modal v-model="workAddVisible" title="新增产线作业" width="800" resize destroy-on-close>
      <vxe-form :data="workAddForm" title-align="right" title-width="100">
        <vxe-form-item title="ID:" field="taskId" span="12" :item-render="{name: 'input', attrs: {placeholder: '请输入Id'}}"></vxe-form-item>
        <vxe-form-item title="作业计划名称:" field="taskName" span="12" :item-render =" { name: 'input', attrs: {placeholder: '请输入计划名称'}}" ></vxe-form-item>
        <vxe-form-item title="计划时间:" span="24">
          <el-date-picker
            value-format="yyyy-MM-dd HH:mm:ss"
            v-model="workAddForm.planningTime"
            size="medium"
            :style="{width:275+'px'}"
            type="datetime"
            placeholder="选择日期时间">
          </el-date-picker>
        </vxe-form-item>
        <vxe-form-item title="完成率:" field="completionRate" span="12" :item-render="{name: 'input', attrs: { placeholder: '请输入完成率'}}"></vxe-form-item>
        <vxe-form-item title="输入:" field="enter" span="12" :item-render="{name: 'input', attrs: {type: 'number', placeholder: '请输入输入量'}}"></vxe-form-item>
        <vxe-form-item title="产出:" field="output" span="12" :item-render="{name: 'input',attrs: {type: 'number', placeholder: '请输入产出'}}"></vxe-form-item>
        <vxe-form-item title="产量:" field="yield" span="12" :item-render="{name: 'input',attrs: {type: 'number', placeholder: '请输入产量'}}"></vxe-form-item>
        <vxe-form-item title="利用率%:" field="utilization" span="12" :item-render="{name: 'input',attrs: {type: 'number', placeholder: '请输入产率'}}"></vxe-form-item>
        <vxe-form-item title="完成状态:" field="finishedCondition" span="12" :item-render =" { name: '$select', options: this.workStatusptions }" ></vxe-form-item>
        <vxe-form-item align="right" span="24">
          <vxe-button type="submit" status="primary" @click="saveProlineWork">保存</vxe-button>
          <vxe-button @click="workAddVisible = false">取消</vxe-button>
        </vxe-form-item>
      </vxe-form>
    </vxe-modal>

  </div>
</template>

<script>
  import EquipTypeApi from '@/api/equipType'
  import ProlineApi from '@/api/ProlineApi'
  import mixins from '@/mixins'
  export default {
    mixins:[mixins],

    data() {
      return {
        jugeClick:0,
        equipTypeOptions: [],
        // 产线设备加载
        equipLoading:false,
        // 产线作业加载
        workLoading:false,
        // 表单
        pLLForm:{
          prolineId:'',
          prolineName:'',
          spectralEquipment:'',
          description:'',
        },
        // 加载
        equipWorkloading:false,
        // 产线列表分页
        proline_pageInfo:{
          pageSize:10,
          currentPage: 1,
          count:0
        },
        // 设备状态
        equipStatusOptions:[{
          value: '1',
          label: '运行'
        },{
          value: '0',
          label: '停止'
        },{
          value: '2',
          label: '缺料'
        },{
          value: '3',
          label: '故障'
        },{
          value: '4',
          label: '维护'
        }],

        // 作业完成状态
        workStatusptions:[{
          value: '1',
          label: '已完成'
        },{
          value: '0',
          label: '未开始'
        },{
          value: '2',
          label: '进行中'
        }],
        // 产线设备分页
        lineequip_pageInfo:{
          pageSize:100,
          currentPage: 1,
          count:0
        },
        // 产线作业分页
        linework_pageInfo:{
          pageSize:100,
          currentPage: 1,
          count:0
        },
        // 产线删除prolineId
        theDeleteProlineId:'',
        // 产线设备 作业 名字
        prolineEquipWorkName:'',

        input4:'',
        // 文字宽度
        formLabelWidth: '80px',
        //产线列表添加
        prodctlineListVisible:false,
        //产线列表删除
        deleteProlineListVisble:false,
        // 设备添加
        equipAddVisible:false,
        // 产线作业
        workAddVisible:false,

        // 产线列表
        prolineList:[],
        // 产线设备列表
        ProlineEquipList:[],
        // 产线作业列表
        ProlineductList:[],

        // 产线列表编辑
        prolineListEdit:false,
        // 产线列表添加
        prolineEditForm:{
          description:"",
          prolineId:"",
          prolineName:"",
          spectralEquipment:"",
          status:"1"
        },
        // 产线list修改oldprolineId  修改id需要传一个old id
        oldProlineId:"",

        // 产线设备添加
        equipAddForm:{
          prolineId:'',
          promentId:"",
          utilization:"",
          prolineEquipName:'',
          process:"",
          output:"",
          equipmentName1:"",
          equipmentId:'',
          enter:'',
          deviceStatus:""
        },
        // 产线作业添加
        workAddForm:{
          prolineId:'',
          taskId:'',
          taskName:'',
          planningTime:'',
          completionRate:'',
          enter:'',
          output:'',
          yield:'',
          utilization:'',
          finishedCondition:'',
        }
      }
    },
    methods:{
      // 打开添加框
      openProductlineAddVisable(){
        // 打开弹窗
        this.prodctlineListVisible = true
      },
      // 分页查询产线列表
      getProlineListByPage(){
        ProlineApi.ProlineList(this.proline_pageInfo).then(res => {
          this.prolineList = res.data.data.records
          // 总数
          this.proline_pageInfo.count = res.data.data.total
        })
      },
      // 添加产线列表
      addProlineList(){
        ProlineApi.ProlineListAdd(this.pLLForm).then(res => {
          if(res.data.status === "200"){
            // 关闭弹窗
            this.prodctlineListVisible = false

            // 清楚输入框
            this.pLLForm.prolineId = ""
            this.pLLForm.prolineName = ""
            this.pLLForm.spectralEquipment = ""
            this.pLLForm.description = ""

            // 重新获取数据
            this.getProlineListByPage()
          }
        })
      },
      // 获取产线设备  产线作业 根据产线列表id
      getProlineEquipWork(equip_pageInfo,work_pageInfo,prolineId){
        // 产线设备
        ProlineApi.prolineEquiPQuery(equip_pageInfo,prolineId).then(res => {
          this.ProlineEquipList = res.data.data.records
        })

        // 产线作业
        ProlineApi.prolineWorkQuery(work_pageInfo,prolineId).then(res => {
          this.ProlineductList = res.data.data.records
        })
      },
      // 查看proline
      lookProlineList(row){
        // 将这个数据存在新增的产线设备form里面
        this.equipAddForm.prolineId = row.prolineId
        // 将这个数据存在新增的产线作业form里面
         this.workAddForm.prolineId = row.prolineId

        // 打开Loading 加载
        this.equipWorkloading = true

        // 根据产线列表id 获取 产线设备 产线作业
        this.getProlineEquipWork(this.lineequip_pageInfo,this.linework_pageInfo,row.prolineId)
        //设备 作业名称
        this.prolineEquipWorkName = row.prolineName

        this.timer = setTimeout(()=>{   //设置延迟执行
            // 关闭Loading 加载
            this.equipWorkloading = false

            // 已经点击 所以展示按钮添加
            this.jugeClick = 1

        },300);
      },
      prolineListDelete(row){
        this.$XModal.confirm('您确定要删除吗？删除不可逆，请确认').then(type => {
          if(type === "confirm"){
            ProlineApi.ProlineListDelete(row.prolineId).then(res => {
              if(res.data.status === "200"){
                // 获取新产线list数据
                this.getProlineListByPage()
              }
            })
          }
        })
      },
      // 添加设备list
      addEquipListVisble(){
        // 分页
        var pageInfo = {
          // pageNo:1,
          pageSize:100,
          currentPage: 1,
          count:0
        }
        // 获取设备类型list
        EquipTypeApi.eEquipmentypeList(pageInfo).then(res => {
          if(res.data.status === "200"){
            // 先清空，避免以后数据混乱
            this.equipTypeOptions = []
            // 遍历数据
            res.data.data.records.map(val => {
              var obj = {
                value:'',
                label:''
              }
              // 存设备ID
              obj.value = val.equipmentId
              // 存设备名
              obj.label = val.equipmentName
              // push到equipTypeOption
              this.equipTypeOptions.push(obj)
            })
          }
        })
        // 展示弹窗
        this.equipAddVisible = true
      },
      prolineEditVisble(row){
        this.prolineEditForm = row
        // 打开弹窗
        this.prolineListEdit = true
        // 设置oldProlineId
        this.oldProlineId = row.prolineId
      },
        // 产线编辑
      prolineUpdate(){
        ProlineApi.ProlineListEdit(this.prolineEditForm,this.oldProlineId).then(res => {
          if(res.data.status === "200"){
            this.getProlineListByPage(this.proline_pageInfo)
            this.prolineListEdit = false
          }
        })
      },
      //添加设备产线
      saveProlineEquip(){
       ProlineApi.insertProlineEquip(this.equipAddForm).then(res => {
         if(res.data.status === "200"){
           // 关闭弹窗
           this.equipAddVisible = false
           // 开启加载
           this.equipLoading = true
           // 重新获取数据
           ProlineApi.prolineEquiPQuery(this.lineequip_pageInfo,this.equipAddForm.prolineId).then(res => {
             this.ProlineEquipList = res.data.data.records
             this.equipLoading = false
           })
         }
       })
      },
      // 设备状态发生改变
      theDeviceStatusChange(row){
        this.equipLoading = true
        ProlineApi.ProlineEquipStatus(row.deviceStatus,row.prolineId,row.promentId).then(res => {
          if(res.data.status === "200"){
            // 重新获取数据
            ProlineApi.prolineEquiPQuery(this.lineequip_pageInfo,row.prolineId).then(res => {
              this.ProlineEquipList = res.data.data.records
              this.equipLoading = false
            })
          }
        })
      },
      // 产线设备列表删除
      prolineEquipDelete(row){
        this.$XModal.confirm('您确定要删除吗？删除不可逆，请确认').then(type => {
          if(type === "confirm"){
            ProlineApi.ProlineEquipDelete(row.promentId,row.prolineId).then(res => {
              if(res.data.status === "200"){
                // 重新获取数据
                this.equipLoading = true
                ProlineApi.prolineEquiPQuery(this.lineequip_pageInfo,row.prolineId).then(res => {
                  this.ProlineEquipList = res.data.data.records
                  this.equipLoading = false
                })
              }
            })
          }
        })
      },
      // 产线作业添加
      saveProlineWork(){
        ProlineApi.ProlineWorkAdd(this.workAddForm).then(res => {
          if(res.data.status === "200"){
            this.workLoading = true
            // 刷新数据
            // 产线作业
            ProlineApi.prolineWorkQuery(this.linework_pageInfo,this.workAddForm.prolineId).then(res => {
              this.ProlineductList = res.data.data.records
              this.workLoading = false
              this.workAddVisible = false
            })
          }
        })
      },
      // 产线作业删除
      workDelete(row){
        this.$XModal.confirm('您确定要删除吗？删除不可逆，请确认').then(type => {
          if(type === "confirm"){
            ProlineApi.ProlineWorkDelete(row.taskId,row.prolineId).then(res => {
              if(res.data.status === "200"){
                this.workLoading = true
                // 刷新数据
                // 产线作业
                ProlineApi.prolineWorkQuery(this.linework_pageInfo,this.workAddForm.prolineId).then(res => {
                  this.ProlineductList = res.data.data.records
                  this.workLoading = false
                })
              }
            })
          }
        })
      },
      // 产线作业状态改变
      workStatusChange(row){
        this.workLoading = true
        ProlineApi.ProlineWorkStatus(row.finishedCondition,row.prolineId,row.taskId).then(res => {
          if(res.data.status === "200"){
            // 重新获取数据
            ProlineApi.prolineWorkQuery(this.linework_pageInfo,row.prolineId).then(res => {
              this.ProlineductList = res.data.data.records
              this.workLoading = false
            })
          }
        })
      }
    },
    created() {
      // 获取前10条数据
       this.getProlineListByPage(this.proline_pageInfo)
    }
  }
</script>

<style scoped="scoped">
  .productline-content{
    background-color: #FFFFFF;
    /* padding: 20px; */
    display: flex;
    justify-content: flex-start;
  }
  .productline-content-left-header{
    height: 40px;
    color: rgb(88, 88, 88);
    /* line-height:40px; */
    background-color: #f5f5f5;
    box-shadow: 1px 1px 4px #909399;
    /* padding: 0 20px; */
    margin-top: 30px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .children-one{
    width: 32%;
    margin-right: 1%;
    margin-left: 1%;
    /* border: 1px solid #DCDFE6; */
  }
  .children-two{
    width: 65%;
  }
   .productline-content-left-table{
     /* padding: 20px; */
    border: 1px solid #DCDFE6;
   }
   .right-div{
     display: flex;
     height: 40px;
     /* justify-content: space-between; */
     align-items: center;
     background-color: #f5f5f5;
     box-shadow: 1px 1px 4px #909399;
     margin-top: 30px;
   }
   .right-div-buttom{
     display: flex;
   }
</style>
